<template>
  <div>
    <el-row :gutter="6">
      <el-form
        ref="boxForm"
        :model="boxData"
        :rules="rules"
        size="mini"
        label-width="60px"
      >
    <el-card>
      <div slot="header" class="clearfix text-left">
        <el-col :span="23">
          <span class="title-icon">卡板入库</span>
        </el-col>
        <el-col :span="1">
          <el-button size="mini" type="primary" @click="onSubmit">确定</el-button>
        </el-col>
      </div>
      <el-form :model="form" ref="basisForm" :rules="rules" size="mini">
        <el-row>
          <el-col :span="6">
            <el-form-item label="运单号：" label-width="120px" prop="orderNo">
              <el-input size="mini" v-model="form.orderNo" @keyup.enter.native="orderNoCheck"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="卡板长：" label-width="120px" prop="pLength">
              <el-input size="mini" v-model="form.pLength" class="plinput"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="卡板宽：" label-width="120px" prop="pWidth">
              <el-input size="mini" v-model="form.pWidth"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="卡板高：" label-width="120px" prop="pHeight">
              <el-input size="mini" v-model="form.pHeight"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="卡板重：" label-width="120px" prop="pWeight">
              <el-input size="mini" v-model="form.pWeight"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="货物件数：" label-width="120px" prop="goodsNum">
              <el-input size="mini" v-model="form.goodsNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="卡板数：" label-width="120px" prop="palletNum">
              <el-input size="mini" v-model="form.palletNum" @keyup.enter.native="onSubmit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <el-row>
        <span>仓库:</span>
        <el-select v-model="locationValue" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-col :span="2" style="float: right">
          <el-button size="mini" type="primary" @click="synTemInfo">同步临时数据</el-button>
        </el-col>
      </el-row>
    </el-card>
    <div v-if="boo" v-model="cu" style="margin-top: 10px">
      <el-card :span="15" class="margin-top">
        <div slot="header" class="clearfix text-left">
          <el-row>
            <el-col :span="4">
              <span>客户:</span>
              <span>{{columns2.customerName}}</span>
            </el-col>
            <el-col :span="4">
              <span>运单号:</span>
              <span>{{columns2.orderNo}}</span>
            </el-col>
            <el-col :span="4">
              <span>件数:</span>
              <span>{{columns2.goodsNum}}</span>
            </el-col>
            <el-col :span="4">
              <span>重量:</span>
              <span>{{this.columns2.customerActualWeight}}</span>
            </el-col>
            <el-col :span="4">
              <span>体积:</span>
              <span>{{this.columns2.customerVolume}}</span>
            </el-col>
            <el-col :span="4">
              <span>计费重:</span>
              <span>{{this.columns2.customerChargedWeight}}</span>
            </el-col>
          </el-row>
        </div>
        <el-col :span="4" style="margin-top: 5px">
            <el-row style="margin-top: 5px">
                <span>目的国家:</span>
                <span>{{columns2.countryName}}</span>
              </el-row>
              <el-row style="margin-top: 5px">
                <span>入库渠道:</span>
                <span>{{columns2.inStockChannel}}</span>
              </el-row>
              <el-row style="margin-top: 5px">
                <span>客户备注:</span>
                <span>{{columns2.customerRemark}}</span>
              </el-row>
              <el-row style="margin-top: 5px">
                <span>系统备注:</span>
              </el-row>
              <el-input
                type="textarea"
                size="mini"
                placeholder="请输入备注内容"
                v-model="sysRemark"
                style="margin-top: 5px;"
              ></el-input>
              <el-button
                type="primary"
                @click="updateRemark"
                size="mini"
                style="margin-top: 5px;  margin-left: 72%"
              >确定</el-button
              >
        </el-col>
      <el-col :span="20">
        <el-table :data="columns" style="width: 100%"  size="mini"
                  border>
          <el-table-column property="palletNo" :auto-fit="true"
                           :fit-header="true" label="序号">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column property="goodsNum" label="货物件数">
          </el-table-column>
          <el-table-column property="pWeight" label="实重">
          </el-table-column>
          <el-table-column property="pLength" label="卡板长">
          </el-table-column>
          <el-table-column property="pWidth" label="卡板宽">
          </el-table-column>
          <el-table-column property="pHeight" label="卡板高">
          </el-table-column>
          <el-table-column property="volume" label="体积">
          </el-table-column>
          <el-table-column property="volumeWeight" label="体积重">
          </el-table-column>
          <el-table-column property="chargeWeight" label="计费重">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleEdit(scope.row.id)" slot="reference">编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete( scope.row.id,scope.row, scope.$index)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      </el-card>
    </div>
    <el-card style="margin-top: 5px">
      <el-form-item size="large">
        <el-button
          type="primary"
          @click="saveInStockData"
          style="float: center; margin-left: 40%"
          size="mini"
        >
          保存
        </el-button>
      </el-form-item>
    </el-card>
    </el-form>
    </el-row>


    <div>
      <el-dialog
        title="编辑"
        :visible.sync="boopop">
        <el-form v-model="colValue" ref="basisForm" size="mini">
          <el-input size="mini" type="hidden" v-model="colValue.id"></el-input>
          <el-row>
            <el-col :span="10">
              <el-form-item label="实重：" label-width="120px" prop="pWeight">
                <el-input size="mini" v-model="colValue.pWeight"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="卡板长：" label-width="120px" prop="pLength">
                <el-input size="mini" v-model="colValue.pLength"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="卡板宽：" label-width="120px" prop="pWidth">
                <el-input size="mini" v-model="colValue.pWidth"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="卡板高：" label-width="120px" prop="pHeight">
                <el-input size="mini" v-model="colValue.pHeight"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="2" style="float: right">
            <el-button size="mini" type="primary" @click="updatePalletInstock">保存</el-button>
          </el-col>
        </el-form>
      </el-dialog>
    </div>

    <div>
      <el-dialog
        title="同步临时数据"
        :visible.sync="boosyn">
        <el-table ref="multipleTable"
                  tooltip-effect="dark" :data="gridData" style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column property="orderNo" label="运单号">
          </el-table-column>
          <el-table-column property="customerName" label="客户">
          </el-table-column>
          <el-table-column property="customerChannelName" label="入库渠道">
          </el-table-column>
          <el-table-column property="totalSize" label="总箱数">
          </el-table-column>
          <el-table-column property="totalSize" label="临时箱数">
          </el-table-column>
          <el-table-column property="curCount" label="临时卡板数">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleSycDelete( scope.row.orderNo,scope.row, scope.$index)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveSelectGoods">确定</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>
<script>
  import {ajax} from "@/store/yg/common/utils";

  export default {
    props: ["field"],
    data() {
      return {
        form: {
          orderNo: "",
          pLength: "",
          pWidth: "",
          pHeight: "",
          pWeight: "",
          goodsNum: "",
          palletNum: ""
        },
        columns: {
          id: "",
          palletNo: "",
          goodsNum: "",
          pLength: "",
          pWeight: "",
          pWidth: "",
          pHeight: "",
          volumeWeight: "",
          chargeWeight: "",
          volume: ""
        },
        rules: {
          orderNo: [{required: true, message: "请输入运单号", trigger: "blur"}],
          pLength: [{required: true, message: "请输入卡板长", trigger: "blur"}],
          pWidth: [{required: true, message: "请输入卡板宽", trigger: "blur"}],
          pHeight: [{required: true, message: "请输入卡板高", trigger: "blur"}],
          pWeight: [{required: true, message: "请输入卡板重", trigger: "blur"}],
          goodsNum: [{required: true, message: "请输入货物件数", trigger: "blur"}],
          palletNum: [{required: true, message: "请输入卡板数", trigger: "blur"}]
        },
        columns2: [],
        gridData: [],
        cu: {},
        boo: false,
        options: [],
        locationValue: "",
        boopop: false,
        boosyn: false,
        colValue: {
          id: "",
          pLength: "",
          pWeight: "",
          pWidth: "",
          pHeight: ""
        },
        sysRemark: "",
        totalWeight: "",
        totalVolume: "",
        totalChargeWeight: "",
        multipleSelection: [],
        waybillId: '',
      };
    },
    mounted() {
      this.storageLocations();
    },

    methods: {
      initData() {
        if (this.columns.length > 0) {
          var a = 0, b = 0, c = 0;
          for (var i = 0; i < this.columns.length; i++) {
            a = a + Number(this.columns[i].pWeight);
            b = b + Number(this.columns[i].volume);
            c = c + Number(this.columns[i].chargeWeight);
          }
          this.totalWeight = a;
          this.totalVolume = b;
          this.totalChargeWeight = c;
        }
      },
      onSubmit() {
        if ("" === this.id) {
          return;
        }
        console.log(this.form)
        ajax("addPalletInstockGoods", this.form).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error('保存卡板信息失败'+res.message);
            } else {
              this.$message.success('保存卡板信息成功');
              this.columns = res.data;
              this.cu = this.columns[0];
              this.columns2 = res.data2;
              this.initData()
            }
          },
          error => {
            console.log(error);
          }
        );
      },

      orderNoCheck: function () {
        ajax("orderNoCheck", this.form).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error('当前订单不存在'+res.message);
              this.form.orderNo = "";
            } else {
              this.boo = true;
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      storageLocations: function () {
        ajax("storageLocations", {}).then(
          res => {
            console.log(res);
            if (res.code == 200) {
              this.options = res.data2;
              this.locationValue = res.data;
            }else{
              this.$message.error('操作失败'+res.message);
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      handleEdit(id) {
        ajax("findbyid", {"id": id}).then(
          res => {
            console.log(res);
            this.colValue = res;
            this.boopop = true;
          },
          error => {
            console.log(error);
          }
        );
      },
      handleDelete(id, row, i) {
        ajax("delete", {"id": id}).then(
          res => {
            console.log(res);
            if (res.code == 200) {
              this.$message.success('删除成功');
              this.columns.splice(i, 1)
              this.initData()
            }else {
              this.$message.error('删除失败'+res.message);
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      handleSycDelete(orderNo, row, i) {
        ajax("sycDelete", {"orderNo": orderNo}).then(
          res => {
            console.log(res);
            if (res.code == 200) {
              this.$message.success('删除成功');
              this.gridData.splice(i, 1)
              this.initData()
            }else {
              this.$message.error('删除失败'+res.message);
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      updatePalletInstock() {
        console.log(this.colValue)
        ajax("save", this.colValue).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error('修改卡板信息失败'+res.message);
            } else {
              this.$message.success('修改卡板信息成功');
              console.log(this.columns.length);
              for (var i = 0; i < this.columns.length; i++) {
                if (this.columns[i].id === this.colValue.id) {
                  Object.assign(this.columns[i], this.colValue)
                  //this.$set(this.columns[i],'','')
                }
              }
              console.log(this.columns)
            }
            this.boopop = false;
            this.initData();
          },
          error => {
            console.log(error);
          }
        );
      },
      updateRemark() {
        ajax("updateRemark", {"sysRemark": this.sysRemark, "orderNo": this.form.orderNo}).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error('添加系统备注失败'+res.message);
            } else {
              this.$message.success('添加系统备注成功');
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      saveInStockData() {
        var cur = {};
        cur["orderNo"] = this.form.orderNo;
        cur["inStockDataArray"] = this.columns;
        cur["storageLocation"] = this.locationValue;
        ajax("saveInStockData", cur).then(
          res => {
            console.log(res);
            if (res.code == 200) {
              this.$message.success('保存成功');
              this.timeout = setTimeout(() => {
                window.location.reload(true);
              }, 3000 * Math.random());
            } else {
              this.$message.error('保存失败'+res.message);
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      synTemInfo() {
        ajax("synTemPalletInfo", {}).then(
          res => {
            console.log(res);
            if (res.code == 200) {
              this.gridData = res.data;
              this.boosyn = true;
            }else {
              this.$message.error('操作失败'+res.message);
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(val);
      },
      handleMessSycDelete(obj) {
        var waybillList = "";
        for(var i of this.multipleSelection){
          waybillList += i.orderNo + ",";
        }
        if (waybillList.indexOf(",") > -1) {
          waybillList = waybillList.substring(0, waybillList.length - 1);
        } else {
          tipsByQiao("请先选择数据");
          return;
        }
        ajax("handleMessSycDelete", { "waybillList": waybillList }).then(
          res => {
            console.log(res);
            if (res.code == 200) {
              this.$message.success('保存成功');
            } else {
              this.$message.error('保存失败'+res.message);
            }
          },
          error => {
            console.log(error);
          }
        );
      },
      saveSelectGoods() {
        if (this.multipleSelection.length > 1) {
          this.$message.error("暂时只能单选");
          return;
        }
        ajax("queryInstockGoodsByOrderNos", this.multipleSelection).then(
          res => {
            console.log(res);
            if (res.code == 200) {
              this.boosyn = false;
              this.showBoxResult = true;
              this.columns = res.data;
              this.columns2 = res.data2;
              this.waybillId = res.data2.waybillId;
            } else {
              this.$message.error("保存失败"+ res.message);
            }
          },
          error => {
            console.log(error);
          }
        );
      },


    }
  };
</script>

<style scoped>

</style>
